<template>
  <!-- 适配车型弹层 -->
  <div class="aa-pop">
    <div class="aa-popBox" style="display:block;">
      <div class="aa-popTitle">
        <div class="swiper-tab">
          <div class="swiper-tab-item lusir-common_cursor" :class="shopDetail_initMode == 'partItemInfo' ? 'swiperActive' : ''" @click="clickTab(0)">商品信息
            <text class="tab-line"></text>
          </div>
          <div v-if="!isCommonParts" class="swiper-tab-item lusir-common_cursor" :class="shopDetail_initMode == 'partItemFitAuto' ? 'swiperActive' : ''" @click="clickTab(1)">适配车型
            <text class="tab-line"></text>
          </div>
        </div>
      </div>

      <div class="aa-popCenter">
        <partItemInfoView v-if="shopDetail_initMode == 'partItemInfo'" :partItemInfoDialog_input="partItemInfoDialog_input"></partItemInfoView>
        <partItemFitAutoView v-if="shopDetail_initMode == 'partItemFitAuto'" :partItemFitAutoDialog_input="partItemInfoDialog_input"></partItemFitAutoView>
      </div>
    </div>
  </div>
</template>

<script>
import partItemInfoView from '@/components/partItemInfoView-new';
import partItemFitAutoView from '@/components/partItemFitAutoView-new';
export default {
  name: '',
  data() {
    return {
      partItemInfoDialog_launched: false, //超级目录产品适配车型弹层组件 是否已启动
      partItemFitAutoDialog_launched: false, //超级目录产品适配车型弹层组件 是否已启动
      shopDetail_initMode: '', // 启动商品详情弹层的模式 partItemInfo：商品详情 partItemFitAuto：车型适配
      partItemInfoDialog_input: {}, //超级目录产品适配车型弹层组件 入参
      isCommonParts: false // 是否为通用件
    }
  },
  created() {
    console.log('router', this.$route.params);
    let propsData = JSON.parse(this.$route.params.requestData);
    this.shopDetail_initMode = propsData.partItemDetailDialog_initMode;
    this.partItemInfoDialog_input = propsData.partItemDetailDialog_input;

    console.log('this.shopDetail_initMode', this.shopDetail_initMode);

  },
  methods: {
    GetPartItemDetail() {
      //已经加载过就无需再次请求了
      app.wx_request({
        data: {
          partItemId: this.data.partItemInfoDialog_input.partItemId
        },
        url: app.globalData.api_domain + "/Misc/GetPartItemDetail_ForShop",
        success: res => {
          this.setData({
            isCommonParts: res.Body.isCommonParts
          })
        }
      })
    },
    clickTab(current) {
      if (current == 0) {
        this.shopDetail_initMode = 'partItemInfo'
      } else {
        this.shopDetail_initMode = 'partItemFitAuto'
      }
    },
    // 关闭弹层
    on_partItemInfoDialog_close() {
      this.triggerEvent('close')
    },
  },
  components: {
    partItemInfoView,
    partItemFitAutoView
  }
}
</script>

<style scpoed>
/* 弹层通用样式 */
.aa-pop {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}

.aa-popBox {
  width: 100%;
  height: 68%;
  background: #fff;
}

.aa-popTitle {
  width: 100%;
  padding: 0.24rem 0.4rem;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-sizing: border-box;
}
.aa-popTitle > text {
  width: auto;
  height: 0.8rem;
  font-size: 0.4rem;
  line-height: 0.8rem;
  text-align: left;
  color: #282828;
  display: block;
  float: left;
  clear: none;
}
.aa-popTitle > .imgicon {
  height: 0.8rem;
  width: 0.8rem;
  margin-right: -0.08rem;
  font-size: 0.64rem;
  line-height: 0.8rem;
  text-align: center;
  display: block;
  float: right;
  position: absolute;
  right: 0.26rem;
  top: 0.26rem;
}
.aa-popCenter {
  width: 100%;
  height: calc(100vh - 1.4rem);
  overflow-x: hidden;
  overflow-y: auto;
  float: left;
  clear: left;
  padding-bottom: 0.32rem;
  box-sizing: border-box;
}
.swiper-tab {
  display: flex;
  width: 100%;
  margin-top: 0.26rem;
  justify-content: center;
}
.swiper-tab-item {
  margin-left: 0.4rem;
  font-size: 0.36rem;
  padding-bottom: 0.2rem;
  color: #999;
}
.swiperActive {
  color: #e74c3c;
  position: relative;
  font-weight: bold;
}
.swiperActive text {
  position: absolute;
  display: block;
  width: 0.66rem;
  height: 0.08rem;
  background: #e74c3c;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -0.26rem;
}
</style>
